
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<!--<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=false">
    </script>
    -->
<script type="text/javascript" src="mapapi3.8.6.js"></script>
<script type="text/javascript">
  var map;
  var eatMarkersArray = [];
  var pickupMarkersArray = [];
  var shoppingMarkersArray = [];
  var contentString;
  
  function initialize() {
    var latlng = new google.maps.LatLng(40.0053681, 116.4769563);
    var myOptions = {
      zoom: 12,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    	<?php
echo $makerstr;
    	?>
    showMyOverlays();
  }
    
  function addMarker(markersArray,location) {
      marker = new google.maps.Marker({
        position: location,
        map: null
      });
      markersArray.push(marker);
    }
	// Removes the overlays from the map, but keeps them in the array
  function clearOverlays() {
    if (eatMarkersArray) {
      for (i in eatMarkersArray) {
    	  eatMarkersArray[i].setMap(null);
      }
    }
    if (pickupMarkersArray) {
        for (i in pickupMarkersArray) {
        	pickupMarkersArray[i].setMap(null);
        }
      }
    if (shoppingMarkersArray) {
        for (i in shoppingMarkersArray) {
        	shoppingMarkersArray[i].setMap(null);
        }
      }
    
  }

  // Shows any overlays currently in the array
  function showOverlays(markersArray) {
    if (markersArray) {
      for (i in markersArray) {
        markersArray[i].setMap(map);
      }
    }
  }
    // Shows any overlays currently in the array
  function showMyOverlays() {
	  clearOverlays();
	  //alert("abc");
    if (document.getElementById("eatCheckbox").checked==true) {
    	//alert("1");
      showOverlays(eatMarkersArray);
    }
	if (document.getElementById("pickupCheckbox").checked ==true) {
		//alert("2");
      showOverlays(pickupMarkersArray);
    }
	if (document.getElementById("shoppingCheckbox").checked ==true) {
		//alert("3");
      showOverlays(shoppingMarkersArray);
    }
  }
</script>
</head>
<body onLoad="initialize()">
<div>

    <form name="form1" method="post" action="">
      <table width="100%" border="1">
        <tr>
        <th scope="col">选择哪个呢？&nbsp;</th>
          <th scope="col"> 一起吃饭(<?php echo $eatCount?>)：
      <input id="eatCheckbox" type="checkbox" onClick="showMyOverlays();" value="checked" checked>&nbsp;</th>
          <th scope="col">搭顺风车(<?php echo $pickupCount?>)：<input id="pickupCheckbox" type="checkbox" onClick="showMyOverlays();" value="checked" checked>&nbsp;</th>
          <th scope="col">一起购物(<?php echo $shoppingCount?>)：<input id="shoppingCheckbox" type="checkbox" onClick="showMyOverlays();" value="checked" checked>&nbsp;</th>
          
          <th scope="col">&nbsp;</th>
        </tr>
      </table>
     
      
      
      
    </form>
</div> 
  <div id="map_canvas" style="width:100%; height:80%"></div>

</body>
</html>

